import { Component } from 'solid-js'
import { useGame } from './game'
import S from './Versus.module.styl'
import { Skill } from './skill'

type Record = Component<{
  left: Skill
  right: Skill
  classList?: { [x: string]: boolean | undefined }
}>

const Record: Record = prop => {
  const { store } = useGame()
  return <div class={S.line} classList={prop.classList}>
    <span class={S.l}>{store.skill[prop.left].name}</span>
    <span class={S.vs}>vs</span>
    <span class={S.r}>{store.skill[prop.right].name}</span>
  </div>
}

export default Record
